vue v

#vue v| 来源: 网络整理| 查看: 265

使用v-for循环的目的就是为了处理大量类型重复的数据，归根结底是一种有规律的数据，但是有些规律却不是那么容易的，很多时候，我们会使用到循环，甚至多重循环的嵌套，不同的循环嵌套对应着不同的json数据的结构，本篇主要讲述的是使用v-for循环解决部分同，部分不同的情况，主要是针对表格table来使用的。

模拟的json数据如下：

{ "name":"小王", "age":20, "phone":"12345678", "sex":"女", "grades":[ { "term":"2017年第一学期", "project":{ "chinese":100, "math":98, "english":100, "computer":95, "physic":88, "electricty":89 } }, { "term":"2017年第二学期", "project":{ "chinese":90, "math":90, "english":100, "computer":98, "physic":80, "electricty":89 } } ] }

要求：以表格的形式展示这个成绩表！

思路：分析结构，可以发现，为小王一个人的成绩，分别是不同学期的成绩，里面相同的部分是科目，不同的部分是学期

，如果单独的各写各的，则需要很多循环，怎样通过尽可能少的循环就解决了问题，方法如下：

html结构：

{{name}}成绩表

name:{{name}} age:{{age}} phone:{{phone}} sex:{{sex}} 学期语文数学英语计算机物理电路 {{i.term}} {{value}}

这里我们可以清晰的发现：着用了两层循环就实现的表格数据的显示。

效果图如下：

数据绑定的内容如下：

首先引入需要用的json数据的位置；

然后再create的时候就获取这些值；

再通过循环嵌套实现数据的显示，其实这是一个很简单的解决方案，聪明的你只要明白for循环的实现原理，就能想出比较好的点子。

import data from '../../common/data.json'; //1、引入要使用的json数据 export default{ name: 'Order', data(){ return{ name:"", age:0, phone:"", sex:"", grades:[], //2、定义一个可以存放数据的数组 avg:0 } }, created() { //3、json数据内容的获取 this.name = data.name; this.age = data.age; this.phone = data.phone; this.sex = data.sex; this.grades = data.grades; //4、json数据与数据相互传递保存 },

归纳总结一下for循环的使用方法：

1、通过循环展示所有值，直接使用for循环【全部显示】

2、通过循环满足条件展示，不满足不展示，使用for循环+if（满足要显示的条件）【部分显示】

3、通过循环满足时显示一种内容，不满足时显示另一种内容，使用for循环+if（满足显示条件）+else（不满足时显示）【归类显示】

源码查看位置：https://download.csdn.net/download/colourfultiger/10585045

【本文地址】

vue v

vue v

今日新闻

推荐新闻